<template>
  <div>
    <!-- vue提供了ref属性来获取DOM属性
         1.给要获取的DOM元素添加ref属性 ref="属性名" 
         2.给我们所需要的地方添加属性名  this.$refs.属性名-->
     <h1 ref="hh" id="h1">你好世界!</h1>
     <button @click="add">点击获取h1</button>
      <hr>
    <Deme ref="de" v-model="count" />
    <button @click="getDemo">点我获取 Demo 组件</button>
  </div>
</template>

<script>
import Deme from './components/Deme.vue'
export default {
  components:{
    Deme
  },

  data() {
    return {
      count:1
    };
  },
methods:{
  add(){
    const h=document.querySelector('h1')
    console.log(h);
  console.log(this.$refs.hh);
}, 
getDemo() {
      // console.log(this.$refs.de)
      // 获取组件对象有什么用?
      // 组件对象中有组件的数据和方法
      // 当获取到组件对象后, 可以获取子组件的数据, 可以调用子组件的方法
      this.$refs.de.fn(123)
      console.log(this.$refs.de.msg)
    }
  
}
};
</script>

<style lang="scss" scoped>

</style>